<!--
 * @Author: 郑锐 307057322@qq.com
 * @Date: 2021-11-30 13:29:51
 * @LastEditors: 郑锐 307057322@qq.com
 * @LastEditTime: 2022-09-13 09:56:40
 * @FilePath: \QH-DuChaWeb\src\components\globals\pagination.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="pagination d-flex flex-row justify-content-between align-items-center j-end">
    <span v-if="showPages" class="font-size-sm"> 共 {{ total }} 条数据 第 {{ currentPage }} / {{ Math.ceil(total / pageSize) }} 页</span>
    <el-pagination :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    showPages: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleSizeChange(val) {
      if (this.$parent.form) {
        this.$parent.form.pageSize = val
      }
      this.$emit('changeData', { pageNum: 1, pageSize: val })
    },
    handleCurrentChange(val) {
      if (this.$parent.form) {
        this.$parent.form.pageNum = val
      }
      this.$emit('changeData', { pageNum: val, pageSize: this.pageSize })
    }
  }
}
</script>

<style lang="scss">
.pagination {
  margin: 15px 0;
  line-height: 31px;
  color: #666;
  .el-pagination {
    float: right;
    .el-pagination__total,
    .el-pagination__jump {
      color: #666;
    }
    .el-pager {
      li {
        background: transparent;
        color: #666;
        &.active  {
          background-image: linear-gradient(30deg,#13a9ff 0%,#64ebfb 100%),
          linear-gradient(#00a1f7,#00a1f7);
          border-radius: 10px;
          color: #fff;
        }
      }
    }
    button {
      background: transparent;
      color: #666;
    }
  }
}
</style>
